import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {Modal, ModalBody, ModalHeader, ModalFooter, Col, Row, Button} from "reactstrap";
import {setFieldData} from "../../../../../../redux/actions/helper";
import Select from "react-select";
import {SET_TICKET_FIELD} from "../../../../../../redux/constants/eventDetail/tabTickets";
import {
  deleteTicket,
  getTicket,
  storeTicket,
  updateTicket
} from "../../../../../../redux/actions/eventDetail/tabTickets";
import NumericInput from "react-numeric-input";

const AddTicketForm = props => {
  const {params, ticket, types, eventId, tickets} = props
  const {setFieldData, getTicket, updateTicket, storeTicket, deleteTicket} = props
  const [ticketsIds, setTicketsIds] = useState([])

  useEffect(() => {
    if (params.isOpenModal && params.ticket_id)
      getTicket(params.ticket_id)
    else if (params.isOpenModal) {
      setFieldData(SET_TICKET_FIELD, 'ticket', {
        number: 0,
        sold: 0,
        price: 0,
        status: false,
        type_id: null,
        type: {},
      })
    }

    if (params.isOpenModal) {
      setTicketsIds(tickets.map(value => value.type.id))
    }

    if (!params.isOpenModal) {
      setFieldData(SET_TICKET_FIELD, 'ticket', {})
      setFieldData(SET_TICKET_FIELD, 'params', {...params, ticket_id: null})
    }
  }, [params.isOpenModal]);

  const Update = () => {
    updateTicket(ticket, params.ticket_id, eventId)
  }

  const Store = () => {
    storeTicket(ticket, eventId)
  }

  return (
    <Modal
      isOpen={params.isOpenModal}
      toggle={() => setFieldData(SET_TICKET_FIELD, 'params', {...params, ticket_id: null, isOpenModal: false})}
      className="modal-dialog-centered modal-lg"
    >
      <ModalHeader
        toggle={() => setFieldData(SET_TICKET_FIELD, 'params', {...params, ticket_id: null, isOpenModal: false})}>
        {params.ticket_id ? 'Редактировать билет' : 'Добавить билет'}
      </ModalHeader>
      <ModalBody className="modal-dialog-centered">
        <div className="w-100">
          <Row className="mb-2">
            <Col lg={6} className="align-self-center mt-1">
              <Select
                className={`schedule-item schedule-input-select`}
                classNamePrefix="dark_select"
                value={ticket.type && {value: ticket.type.id, label: ticket.type.name}}
                options={types.filter(value => {
                  return ticketsIds.indexOf(value.id) === -1
                }).map(value=>{
                  return {
                    ...value,
                    value: value.id,
                    label: value.name
                  }
                })}
                isSearchable={false}
                onChange={e => setFieldData(SET_TICKET_FIELD, 'ticket', {...ticket, type_id: e.id, type: e})}
              />
            </Col>
            <Col lg={6} className="align-self-center mt-1">
              <input id="number"
                     placeholder="Количество"
                     type="number"
                     onChange={e => {
                       setFieldData(SET_TICKET_FIELD, 'ticket', {...ticket, number: e.target.value})
                     }}
                     value={ticket.number || ''}
                     className={`ticket-item ticket-item-input`}/>
            </Col>
            <Col lg={6} className="align-self-center mt-1">
              <input id="price"
                     placeholder="Цена"
                     type="number"
                     onChange={e => {
                       setFieldData(SET_TICKET_FIELD, 'ticket', {...ticket, price: e.target.value})
                     }}
                     value={ticket.price || ''}
                     className={`ticket-item ticket-item-input`}/>
            </Col>
            <Col lg={6} className="align-self-center mt-1">
              <input id="sold"
                     placeholder="Продано"
                     type="number"
                     onChange={e => {
                       setFieldData(SET_TICKET_FIELD, 'ticket', {...ticket, sold: e.target.value})
                     }}
                     value={ticket.sold || ''}
                     className={`ticket-item ticket-item-input`}/>
            </Col>
          </Row>
        </div>
      </ModalBody>
      <ModalFooter>
        {params.ticket_id ?
          <>
            <Button.Ripple
              color="danger"
              className="btn-uppercase"
              onClick={() => deleteTicket(params.ticket_id, eventId)}
            >
              Удалить
            </Button.Ripple>
            <Button.Ripple
              color="primary"
              className="btn-uppercase"
              onClick={Update}
            >
              Обновить
            </Button.Ripple>
          </>
          :
          <>
            <Button.Ripple
              color="danger"
              className="btn-uppercase"
              onClick={() => setFieldData(SET_TICKET_FIELD, 'params', {...params, ticket_id: null, isOpenModal: false})}
            >
              Отмена
            </Button.Ripple>
            <Button.Ripple
              color="primary"
              className="btn-uppercase"
              onClick={Store}
            >
              Добавить
            </Button.Ripple>
          </>
        }

      </ModalFooter>
    </Modal>
  )

}

const mapStateToProps = state => ({
  params: state.eventTickets.params,
  ticket: state.eventTickets.ticket,
  types: state.eventTickets.types,
  tickets: state.eventTickets.tickets,
});

export default connect(mapStateToProps, {
  setFieldData,
  getTicket,
  updateTicket,
  storeTicket,
  deleteTicket
})(AddTicketForm)
